<template>
	<view class="page">
		<view class="doctor-head">
			<view class="doctor-avatar">
				<image src="http://yao.hayzon.com/static/askDoctor/avatar.png" class="doctor-avatar-image"></image>
				<view class="doctor-flag">医生资质已认证</view>
			</view>
			<view class="doctor-base-info">
				<view>
					<text class="doctor-name">刘东东</text>
					<text class="doctor-online">医生在线</text>
				</view>
				<view>
					<text class="doctor-label">主治医师</text>
					<text class="doctor-label">中医男科</text>
					<text class="doctor-label">中医内科</text>
				</view>
			</view>
		</view>
		<view class="doctor-service">
			<text class="doctor-service-title">医生服务</text>
			<view class="doctor-service-body">
				<image src="http://yao.hayzon.com/static/askDoctor/message.png" class="doctor-service-chat"></image>
				<view class="doctor-service-body-text">
					<view>
						<text class="text-b">图文复诊</text>
						<text class="text-r">￥39元/次</text>
						<text class="text-d">￥117</text>
					</view>
					<view>
						<text>使用文字、图片与医生沟通。</text>
					</view>
				</view>
				<image src="http://yao.hayzon.com/static/index/arrow.png" class="link-icon"></image>
			</view>
		</view>
		<view class="button-box">
			<view class="button-item">
				<image src="http://yao.hayzon.com/static/askDoctor/card.png"></image>
				<text>分享医生名片</text>
			</view>
			<view class="button-item-empty"></view>
			<view class="button-item">
				<image src="http://yao.hayzon.com/static/askDoctor/send.png"></image>
				<text>送心意</text>
			</view>
		</view>
		<view class="more-info">
			<view>
				<view class="more-info-title">主治</view>
				<view class="more-info-label-box">
					<text class="more-info-label">阳痿</text>
					<text class="more-info-label">早泄</text>
					<text class="more-info-label">男性不育症(少、弱精子症)</text>
					<text class="more-info-label">遗精</text>
					<text class="more-info-label">痤疮</text>
					<text class="more-info-label">甲亢</text>
					<text class="more-info-label">痛经</text>
					<text class="more-info-label">遗尿</text>
				</view>
			</view>
			<view>
				<view class="more-info-title">擅长</view>
				<text class="more-info-text">治疗肾虚、早泄、前列腺炎等男科疾病以及甲亢、痧凉等内外科诸证。</text>
			</view>
			<view>
				<view class="more-info-title">简介</view>
				<text class="more-info-text">中医硕士，出身医学世家，自幼耳濡目染，深受启蒙。临床经验数年，擅治阳痿、早泄、不育等各种男科疾......</text>
			</view>
		</view>
		<view class="bottom-button" @tap="navigateTo">
			立即咨询
		</view>
		<view class="ask-fix-icon">
			<image src="http://yao.hayzon.com/static/askDoctor/tel.png"></image>
		</view>
	</view>
</template>

<script>
	
	export default {
		methods: {
			navigateTo() {
				uni.navigateTo({
					url: 'submitOrder'
				})
			}
		}
	}
</script>

<style>
	.page{
		background-repeat: no-repeat;
		background-size: cover;
		/* background-image: url("~http://yao.hayzon.com/static/temp/ask.jpg"); */
		height: 100%;
	}
	.doctor-head{
		margin-top:10upx;
		display:flex;
		flex-direction: row;
		background-color:#fff;
		padding-bottom:50upx;
		margin-bottom: 5upx;
	}
	.doctor-avatar,.doctor-base-info{
		display:flex;
		flex-direction: column;
	}
	.doctor-avatar{
		padding-top:35upx;
		padding-left:45upx;
	}
	.doctor-base-info{
		padding-left:37upx;
		padding-top:45upx;
	}
	.doctor-avatar-image{
		width:160upx;
		height:160upx;
	}
	.doctor-flag{
		background-repeat: no-repeat;
		background-size: cover;
		background-image: url("~http://yao.hayzon.com/static/askDoctor/flag.png");
		width:200upx;
		height: 50upx;
		position: absolute;
		color:#fff;
		font-size:0.5em;
		line-height: 60upx;
		text-align: right;
		padding-right: 20upx;
		top:168upx;
		left:20upx;
	}
	.doctor-name{
		font-size:1.2em;
		font-weight: bold;
		margin-right:20upx;
		color:#353535;
	}
	.doctor-online{
		font-size:0.5em;
		color:#fff;
		background:#4570f2;
		padding-left:15upx;
		padding-right:15upx;
		border-radius: 20upx;
	}
	.doctor-label{
		color:#959595;
		margin-right:25upx;
	}
	.doctor-service{
		background-color:#fff;
		padding-top:27upx;
		padding-bottom:27upx;
		margin-bottom: 5upx;
	}
	.doctor-service-title{
		font-size:1.15em;
		color:#373737;
		font-weight: bold;
		margin-left:35upx;
	}
	.doctor-service-body{
		display:flex;
		flex-direction: row;
	}
	.doctor-service-chat{
		display:flex;
		flex-direction: column;
		width:21px;
		height:21px;
		margin-top:35upx;
		margin-left:35upx;
	}
	.doctor-service-body-text{
		display:flex;
		flex-direction: column;
		padding-left:24upx;
		padding-top:15upx;
		color:#939393;
		font-size:1.01em;
		width:80%;
	}
	.doctor-service-body-text view text{
		margin-right:20upx;
		line-height:35upx;
	}
	.text-b{
		font-weight: bold;
	}
	.text-r{
		color:#ff0000;
		font-size:1.15em;
	}
	.text-d{
		text-decoration: line-through;
		font-size:0.6em;
	}
	.link-icon {
		display:flex;
		flex-direction: column;
		width: 33upx;
		height: 33upx;
		margin-top: 38upx;
	}
	.button-box{
		display:flex;
		flex-direction: row;
		margin-bottom:5upx;
	}
	.button-item{
		background-color:#ffffff;
		width:49%;
		align-content: center;
		text-align: center;
		line-height: 100upx;
	}
	.button-item-empty{
		width:2%;
	}
	.button-item image{
		width:28px;
		height:28px;
		margin-right:20upx;
		vertical-align: text-bottom;
	}
	.button-item text{
		font-size:1em;
		font-weight: bold;
		color:#373737;
	}
	.more-info{
		background-color:#ffffff;
		padding:30upx;
	}
	.more-info-title{
		font-size:1.2em;
		font-weight: bold;
		color:#373737;
	}
	.more-info-label-box{
		display:flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.more-info-label{
		font-size:1em;
		color:#6a6a6a;
		background-color:#ececec;
		margin-right:15upx;
		border-radius: 30upx;
		padding-left:30upx;
		padding-right:20upx;
		margin-top:18upx;
	}
	.more-info-text{
		color:#5b5b5b;
		font-size:1.05em;
	}
	.bottom-button{
		background-color:#e56653;
		line-height: 100upx;
		color:#fff0fa;
		font-size:1.5em;
		text-align: center;
		position: fixed;
		bottom:0;
		left:0;
		right:0;
	}
	.ask-fix-icon{
		background-color:#9f9f9f;
		width:110upx;
		height:110upx;
		border-radius: 70upx;
		position:fixed;
		right:50upx;
		bottom:250upx;
	}
	.ask-fix-icon image{
		width:90upx;
		height:90upx;
		margin:10upx 10upx;
	}
</style>
